<template lang="html">
  <div>
    <lawyer-bar isStaticTop='isStaticTop' />
    <lawyer-head isStaticHead='isStaticHead' />
    <div class="law-index">
      <el-carousel height="400px" arrow='never'>
        <el-carousel-item v-for="item in imgBanner" :key="item">
          <div class="layBanner" :style="item"></div>
        </el-carousel-item>
      </el-carousel>
      <div class="layerServe">
        <div class="w1200 layBox goodLay">
          <div class="layTitle">专注优质法律服务</div>
          <div class="list">
            <ul>
              <li>
                <div class="top">
                  <p class="tit">法律咨询</p>
                  <p class="txt">（排忧解惑  提供行动建议）</p>
                </div>
                <a href="#">
                  <div class="mid info">
                    <img src="../../assets/images/legalServe-icon1.png" alt="">
                    <p class="tit">在线咨询</p>
                    <p class="txt">免费咨询，优质体验</p>
                  </div>
                </a>
                <a href="#">
                  <div class="bot info">
                    <img src="../../assets/images/legalServe-icon2.png" alt="">
                    <p class="tit">电话咨询</p>
                    <p class="txt">及时响应，沟通高效， 高性价比</p>
                  </div>
                </a>
              </li>
              <li>
                <div class="top">
                  <p class="tit">纠纷解决</p>
                  <p class="txt">（简单经济  不诉讼解决纠纷）</p>
                </div>
                <a href="#">
                  <div class="mid info">
                    <img src="../../assets/images/legalServe-icon3.png" alt="">
                    <p class="tit">律师函</p>
                    <p class="txt">向对方提出严正警告， 促成纠纷解决</p>
                  </div>
                </a>
                <a href="#">
                  <div class="bot info">
                    <img src="../../assets/images/legalServe-icon4.png" alt="">
                    <p class="tit">纠纷调解</p>
                    <p class="txt">不诉讼解决纠纷，省钱 省事不伤和气</p>
                  </div>
                </a>
              </li>
              <li>
                <div class="top">
                  <p class="tit">诉讼官司</p>
                  <p class="txt">（司法程序 裁决、判决）</p>
                </div>
                <a href="#">
                  <div class="mid info">
                    <img src="../../assets/images/legalServe-icon5.png" alt="">
                    <p class="tit">律师诉讼</p>
                    <p class="txt">找名人律师 最大化你的 权益</p>
                  </div>
                </a>
                <a href="#">
                  <div class="bot info">
                    <img src="../../assets/images/legalServe-icon6.png" alt="">
                    <p class="tit">自助诉讼</p>
                    <p class="txt">撰写法律文书、查档不 再麻烦</p>
                  </div>
                </a>
              </li>
              <li>
                <div class="top">
                  <p class="tit">法律参谋</p>
                  <p class="txt">（预防风险，领导者的外脑）</p>
                </div>
                <a href="#">
                  <div class="mid info">
                    <img src="../../assets/images/legalServe-icon7.png" alt="">
                    <p class="tit">法律顾问</p>
                    <p class="txt">全所服务，提供全面、 准确的法律体检 </p>
                  </div>
                </a>
                <a href="#">
                  <div class="bot info">
                    <img src="../../assets/images/legalServe-icon8.png" alt="" style="left:20px;">
                    <p class="tit">法律培训</p>
                    <p class="txt">小范围、私密性法律课 程，建立法律实操方法</p>
                  </div>
                </a>
              </li>
            </ul>
            <p class="tip"><i class="icon icon-tip"></i>遇到纠纷不知道怎么办，请从法律咨询开始</p>
          </div>
        </div>
      </div>
      <div class="lawyer-grayBg">
        <div class="w1200 layBox">
          <div class="layTitle">携手中国权威法律专家打造的律师名人堂
            <router-link to='/lawyers'><div class="more">
              更多 <i class="el-icon-d-arrow-right"></i>
            </div></router-link>
          </div>
          <ul class="lawyers">
            <li v-for='(item,index) in lawyer'
            :class="{active:index%3===0}" v-if='index<6'>
              <router-link :to='{name:"lawyerDetail",params: { id: item.json_data.article_id }}'>
                <div class="img">
                  <img v-lazy=item.json_data.img alt="">
                </div>
                <div class="info">
                  <div class="name">{{item.json_data.name}}</div>
                  <div class="pos">{{item.json_data.company}}</div>
                  擅长领域
                  <div class="intro">{{item.json_data.good_area}}</div>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="partner">
        <div class="w1200 layBox">
          <div class="layTitle">合作伙伴</div>
          <table>
            <tr>
              <td><img v-lazy="require('../../assets/images/lawyer-coo1.png')" alt=""></td>
              <td><img v-lazy="require('../../assets/images/lawyer-coo2.png')" alt=""></td>
              <td><img v-lazy="require('../../assets/images/lawyer-coo3.png')" alt=""></td>
              <td><img v-lazy="require('../../assets/images/lawyer-coo4.png')" alt=""></td>
            </tr>
            <tr>
              <td><img v-lazy="require('../../assets/images/lawyer-coo5.png')" alt=""></td>
              <td><img v-lazy="require('../../assets/images/lawyer-coo6.png')" alt=""></td>
              <td><img v-lazy="require('../../assets/images/lawyer-coo7.png')" alt=""></td>
              <td><img v-lazy="require('../../assets/images/lawyer-coo8.png')" alt=""></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <lawyer-footer></lawyer-footer>
  </div>
</template>

<script>
import axios from 'axios'
import lawyerheader from '../header/lawyer-header.vue'
import lawyerfooter from '../footer/footer.vue'
import lawyerBar from '../header/topbar.vue'
export default {
  data(){
    return{
      imgBanner:[
        {background: 'url(' + require("../../assets/images/lay-banner.jpg") + ') center'},
        {background: 'url(' + require("../../assets/images/lay-banner.jpg") + ') center'},
        {background: 'url(' + require("../../assets/images/lay-banner.jpg") + ') center'}
      ],
      lawyer:[],isStaticHead:true,isStaticTop:true
    }
  },
  methods:{
    loadLawyer:function(){
      axios.get('http://cms.xinggeweb.com/api/action/pageArticle?version=1.0.1&apiNo=1000000&time=20170314160401&apiUser=admin&checkSum=YBrs&pageNo=1&pageSize=10&p={folderId:273}')
      .then((response) => {
        console.log(response);
        let lawyerStr = response.data.data.list;
        this.lawyer = lawyerStr;
        for(let a of this.lawyer){
          let substr = a.json_data.good_area.substr(0,80);
          a.json_data.good_area = substr;
          if(substr.length==80){
            a.json_data.good_area = substr+'...';
          }
        }
      })
      .catch((error) => {
        console.log(error);
      })
    }
  },
  // 之前是使用keep-alive进行换成，使用activated()来进行数据更新
  activated(){
    this.loadLawyer();
    document.title='名人堂-首页'
  },
  components:{
    'lawyer-head':lawyerheader,
    'lawyer-footer':lawyerfooter,
    lawyerBar
  }
}
</script>

<style lang="less">
@import 'lawyer.less';
</style>
